<template>
  <div v-title="'活动管理 - 世外生活运营平台'" class="MkActivityMgt">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class=" PublicListStyle">

      <mk-search-component :formArr="formArr"  inputPlaceholder = "标题" @startSearch="fun_call_search">
        <span slot="slot_1">
           <el-button type="primary" size="" @click="handleAdd" class='floatRight btn-create'>发起活动</el-button>
        </span>
        <div  slot="slot_2" class="search-result-amount textAlignRight">
          <el-button type="primary" size="" @click="handleAdd" class='floatRight btn-create'>发起活动</el-button>
        </div>
      </mk-search-component>

      <div class='tabContainer allArticleList'  v-loading="loadingTab"
           element-loading-text="拼命加载中">
          <div class="primary_bg trHasCursor" >
            <el-table
              :data="dataArr.elements"
              style="width: 100%"
              @row-click='showArticleDetail'>
              <el-table-column
                prop="title"
                label="活动标题"
                show-overflow-tooltip
                width="200">
                <template slot-scope="scope">
                  <span v-if="scope.row.recommend" style="color:#3bc0c3;">[已推荐]</span>{{scope.row.title}}
                </template>
              </el-table-column>
              <el-table-column
                prop="siteName"
                label="所属站点"
                show-overflow-tooltip
                width="">
              </el-table-column>
              <el-table-column
                prop="activityStartDate"
                label="活动开始时间"
                show-overflow-tooltip
                width="165">
              </el-table-column>
              <el-table-column
                prop="activityEndDate"
                label="活动结束时间"
                width="165"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="enterPeopleAmount"
                label="报名人数"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                width=""
                show-overflow-tooltip
              >
                <template slot-scope='scope'>
                  {{scope.row.status | status}}
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                label=""
                width='250'>
                <template slot-scope='scope'>
                  <template v-if="scope.row.dataSource == 'OPERATION' ">
                    <el-button v-if='scope.row.status== "NoEnter"||scope.row.status== "Enter" ||　scope.row.status== "Draft" || scope.row.status== "Revoked"' type="text" @click.stop="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button v-if='scope.row.status== "NoEnter"||scope.row.status== "Enter" ||　scope.row.status== "ActivityEnd"' type="text" @click.stop="handleOperation(scope.row.id,'Revoke')">撤回</el-button>
                    <el-button v-if='scope.row.status== "Draft"||scope.row.status== "Revoked"' type="text" @click.stop="handleOperation(scope.row.id,'Publish')">发布</el-button>
                    <el-button v-if='scope.row.status== "Draft"' type="text" @click.stop="handleDelete(scope.row.id)">删除</el-button>
                    <template v-if='scope.row.status== "NoEnter" || scope.row.status== "EnterEnd" || scope.row.status== "Enter" || scope.row.status =="ActivityEnd" '>
                      <el-button type="text" @click.stop="handleOperation(scope.row.id,'NoRecommend')" v-if="scope.row.recommend">取消推荐</el-button>
                      <el-button type="text" @click.stop="handleOperation(scope.row.id,'Recommend')" v-else>推荐</el-button>
                    </template>
                    <el-button v-if='scope.row.status== "NoEnter" || scope.row.status== "EnterEnd" || scope.row.status== "Enter" || scope.row.status =="ActivityEnd" ' type="text" @click.stop="handleOperation(scope.row.id,'Down')">下架</el-button>
                    <el-button v-if='scope.row.status== "Off"' type="text" @click.stop="handleOperation(scope.row.id,'Top')">上架</el-button>
                  </template>
                  <template v-else>
                    <template v-if='scope.row.status== "NoEnter" || scope.row.status== "EnterEnd" || scope.row.status== "Enter" || scope.row.status =="ActivityEnd" '>
                      <el-button type="text" @click.stop="handleOperation(scope.row.id,'NoRecommend')" v-if="scope.row.recommend">取消推荐</el-button>
                      <el-button type="text" @click.stop="handleOperation(scope.row.id,'Recommend')" v-else>推荐</el-button>
                    </template>
                    <el-button v-if='scope.row.status== "NoEnter" || scope.row.status== "EnterEnd" || scope.row.status== "Enter" || scope.row.status =="ActivityEnd" ' type="text" @click.stop="handleOperation(scope.row.id,'Down')">下架</el-button>
                    <el-button v-if='scope.row.status== "Off"' type="text" @click.stop="handleOperation(scope.row.id,'Top')">上架</el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            v-if='dataArr.elements.length>0'
            @current-change="loadData"
            :current-page="dataArr.page"
            :page-size="dataArr.size"
            layout="total, prev, pager, next"
            :total="dataArr.totalAmount">
          </el-pagination>
      </div>
    </div>
    </el-scrollbar>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import { mapState } from 'vuex'
  import activityService from '../../../services/activity'
//  import MkPermission from "../../../components/MkPermission"
  export default {
    name: 'MkActivityMgt',
    components: {
      MkBreadcrumb
    },
    filters: {
      status(value) {
          switch (value) {
            case 'ActivityEnd' : return '活动已结束';
            case 'Draft' : return '草稿';
            case 'Enter' : return '报名中';
            case 'EnterEnd': return '报名已结束';
            case 'NoEnter': return '报名未开始';
            case 'Off': return '平台下架';
            case 'Revoked': return '已撤回';
            default: return '';
          }
      },
      formatDate (value,type) {
        if(value=='' || value==null || value==0){
          return '';
        }
        var date=new Date(value);
        return date.pattern(type)
      }
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      siteArr: state => {
        let arr = [];
        let data = state.site.siteTree;
        arr.push({id:'',name:'全部'});
        if(data.children){
          for(var i=0;i<data.children.length;i++) {
            let item = data.children[i];
            if(item.children && item.children.length>0) {
              arr.push(item);
            }
          }
        }
        return arr;
      }
    }),
    mounted: function() {
      this.$set(this.formArr,1,{
        formLabel:'状态',
        searchName:'status',
        dataType:'string',
        componentType:'Select',
        optionsArr: [
          {name:'活动已结束',value:'ActivityEnd'},
          {name:'草稿',value:'Draft'},
          {name:'报名中',value:'Enter'},
          {name:'报名已结束',value:'EnterEnd'},
          {name:'报名未开始',value:'NoEnter'},
          {name:'平台下架',value:'Off'},
          {name:'已撤回',value:'Revoked'}
        ]
      });
      this.loadSiteTreeData()
    },

    activated(){
      this.loadData();
    },

    methods : {
      fun_call_search(search,input) {
        this.searchCondition.siteId = search.siteArr[search.siteArr.lenght - 1];
        this.searchCondition.status = search.status;
        this.searchCondition.search = input;

        this.loadData(1);
      },
      handleOperation(id,operation) {
        activityService.operationActivityServer({id,id,operation:operation},data=>{
            let str ='';
            switch(operation) {
              case 'Recommend':
                str = '推荐';
                break;
              case 'NoRecommend':
                str = '取消推荐';
                break;
              case 'Publish':
                str = '发布';
                break;
              case 'Revoke':
                str = '撤回';
                break;
              case 'Top':
                str = '上架';
                break;
              case 'Down':
                str = '下架';
                break;
            }
            this.$message.success(str+'成功');
            this.loadData();
        })
      },
      handleDelete(value) {
        this.$confirm('删除将不能恢复，确定要删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {
          activityService.deleteActivityServer({id : value}, (data)=> {
            this.$message.success('删除成功');
            if (this.dataArr.page != 1 && (this.dataArr.totalAmount == (this.dataArr.page - 1) * (this.dataArr.size) + 1)) {
                this.searchCondition['page.pn'] = this.searchCondition['page.pn'] - 1;
            }
            this.loadData();
          });
        }).catch(() => {
        });
      },
      showArticleDetail(row, event, column) {
        this.$router.push({name: 'MkActivityDetail', params: {id: row.id}});
      },
      handleEdit(id) {
        this.$router.push({name: 'MkAddActivity',params:{id: id}});
      },
      handleAdd () {
        this.$router.push({name: 'MkAddActivity'});
      },
      loadData(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        activityService.loadActivityListServer(this.searchCondition,data=>{
          this.dataArr = data.data;
          this.loadingTab = false;
        })
      },
      loadSiteTreeData() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'}).then(data =>{
          let arr = [{id:'',name:'全部'}];
          if(data.data.children){
            for(var i = 0;i<data.data.children.length;i++) {
              let item = data.data.children[i];
              if(item.children && item.children.length>0) {
                arr.push(item);
              }
            }
          }
          this.$set(this.formArr,0,{
            formLabel:'站点',
            searchName:'siteArr',
            dataType:'array',
            componentType:'Cascader',
            changeOnSelect:false,
            optionsArr:arr ,
            defaultProps:{
              label:'name',
              value: 'id',
              children: 'children'
            }
          })
        });
      }
    },

    data() {
      return {
        formArr:[],
        loadingTab: false,
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          siteId: '',
          status: '',
          search: ''
        },
        siteSelect: [''],
        breadcrumbData: {
          list:[
            {
              name: '运营',
              path: null,
              clickAble: false
            }, {
              name: '活动管理',
              path: null,
              clickAble: false
            }
         ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'operation-icon'
        },
        dataArr: {
          page: '',
          size: '',
          totalAmount: '',
          totalPages: '',
          elements: []
        }
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .MkActivityMgt{
    .allArticleList{
      .el-button{
        padding: 0;
        padding-right: 5px;
      }
    }
  }
</style>
